<!--用户评价-->
<style>
  .position-right {
    position: absolute;
    right: 10px;
    top: 15px;
  }
</style>
<div id="comment-box">
  <div class="empty" v-if="comments.length<=0">该课程暂无评价</div>
  #if(user != null)
  <div id="recomm" class="clearfix ${commented?'':'hide'}">
    <button onclick="switchComm(true)" class="btn btn-primary btn-sm pull-right">重新评价</button>
  </div>
  <form id="review-form" class="${commented?'hide':''}" novalidate="novalidate">
    <div id="star-box" class="form-group controls">
      请打分：
      <span class="rating-btn" style="cursor: pointer; width: 100px;">
              <i class="es-icon es-icon-star color-warning" title="很差" data-index="0"></i>
              <i class="es-icon es-icon-star color-gray" title="较差" data-index="1"></i>
              <i class="es-icon es-icon-star color-gray" title="还行" data-index="2"></i>
              <i class="es-icon es-icon-star color-gray" title="推荐" data-index="3"></i>
              <i class="es-icon es-icon-star color-gray" title="力荐" data-index="4"></i>
            </span>
    </div>
    <div class="form-group controls">
            <textarea class="form-control" rows="8" data-display="评价详细内容" name="content"
                      v-model="comment.content"></textarea>
    </div>

    <div class="form-group clearfix">
                <span class="pull-right">
          <a href="javascript:" class="btn btn-link" @click="clear_">取消</a>
          <a href="javascript:" class="btn btn-primary" @click="publishComments(kid)">保存</a>
        </span>
    </div>
  </form>
  #end

  <div id="comment-list">
    <template v-for="(comment, index) in comments">
      <div class="js-reviews">
        <div class="media media-evaluate">
          <div class="media-left">
            <a class="avatar-link-small js-user-card" :href="'/user/'+comment.user.id+'/home'">
              <img class="avatar-small" src="/static/img/pk.jpg">
            </a>
          </div>

          <div class="media-body thread-post">
            <div class="title" style="position: relative;">
              <a class="link-dark" :href="'/user/'+comment.user.id+'/home'">{{comment.user.name?comment.user.name:comment.user.username}}</a>
              <span>{{comment.course.name}}</span>
              <time>{{comment.time}}</time>

              <a v-if="isMyPublish" href="javascript:" class="position-right" title="删除评价"
                 @click="deleteBy(index)">
                <span class="glyphicon glyphicon-trash"></span>
              </a>
            </div>
            <div class="score">
              <i v-for="i in 5" :class="'es-icon es-icon-star '+ (comment.star>=i?'color-warning':'color-grey')"></i>
            </div>

            <div class="content">
              <div class="short-content">
                {{comment.content}}
              </div>
            </div>
          </div>

        </div>
      </div>
    </template>
  </div>

  <nav v-if="page.totalPages>1" class="text-center">
    <navigation :pages="page.totalPages" :current.sync="page.pageNum" @navpage="gotoPage"/>
  </nav>

</div>
<script type="text/javascript" charset="UTF-8">
  var comVm = new Vue({
    el: "#comment-box",
    data: {
      kid: ${kid},
      isMyPublish: ${isMyPublish},
      comment: {
        content: ''
      },
      comments: [],
      star: 1,
      page: {
        pageNum: 1,
        totalPages: 1,
        limit: 8,
        totalRows: 1
      }
    },
    watch: {
      'page.pageNum': function () {
        this.showComments();
      }
    },
    methods: {
      deleteBy: function (index) {
        var self = this;
        var cm = self.comments[index];
        var name = cm.user.name ? cm.user.name : cm.user.username;
        layer.confirm('确定删除【' + name + '】的评论吗？', {title: '删除提示'}, function (i) {
          $.post('/comment/deleteById', {id: cm.id, kid: cm.courseId}, function (data) {
            if (data.success) {
              self.comments.splice(index, 1);
              layer.msg('删除成功！', {icon: 6, time: 1200});
            }
          });
          layer.close(i);
        });
      },
      clear_: function () {
        this.comment = {content: ''};
        this.star = 1;
        setStar(0);
        switchComm(${!commented});
      },
      gotoPage: function (page) {
        this.page.pageNum = page;
      },

      publishComments: function (index) {
        var self = this;
        $.post('/comment/publish', {kid: index, content: self.comment.content, star: comVm.star}, function (data) {
          if (data.success) {
            data.payload.course = infoVm.course;
            self.comments = self.comments.filter(function (t) {
              var oid = t.user.id;
              console.log(oid);
              var uid = data.payload.user.id;

              if (oid == uid) {
                console.log(1);
                return false;
              }
              return true;
            });
            self.comments.unshift(data.payload);
            if (self.comments.length > self.page.limit) {
              self.comments.pop();
            }
            switchComm(false);
            layer.msg("评价成功！", {
              time: 1500
            });

          }
        })
      },
      showComments: function () {
        var self = this;
        $.post('/comment/page', {kid: self.kid, page: self.page.pageNum}, function (data) {

          if (data.success) {
            self.comments = [];
            self.comments = data.payload.rows;
            self.page.pageNum = data.payload.pageNum;
            self.page.totalPages = data.payload.totalPages;
            self.page.totalRows = data.payload.totalRows;
          }
        })
      }
    },
    created: function () {
      this.showComments();
      var self = this;
      $.post('/comment/myComment', {kid: self.kid, page: self.page.pageNum}, function (data) {
        if (data.success) {
          self.comment.content = data.payload.rows[0].content;
          setStar(data.payload.rows[0].star);
        } else {
          console.log("ERROR:" + data.msg);
        }

      });
    }
  });

  var $is = $('#star-box span > i');
  $is.on('mouseover', function () {
    var index = $(this).data('index');
    setStar(index);
    comVm.star = index + 1;
  });

  function setStar(index) {
    for (var i = 0; i < $is.length; i++) {
      if (i <= index) {
        $is.eq(i).removeClass('color-gray').addClass('color-warning');
      } else {
        $is.eq(i).removeClass('color-warning').addClass('color-gray');
      }
    }
  }

  function switchComm(showComm) {
    var $form = $('#review-form');
    var $recomm = $('#recomm');
    if (showComm) {
      $form.removeClass('hide');
      $recomm.addClass('hide');
    } else {
      $form.addClass('hide');
      $recomm.removeClass('hide');
    }

  }
</script>